<template>
    <div>
        <el-collapse-item title="- 文字信息" :name="props.id">
            <ul class="editorformTable" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">文字内容</div>
                    <div class="editorformItemFunc">
                        <el-input v-model="style.text" @input="change('text', style.text)" class="editorforminput" placeholder="请输入文字内容" />
                    </div>
                </li> -->
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">字体</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.font_family" class="editorforminput" @change="change('font_family', style.font_family)">
                            <el-option v-for="opt in fontFamily" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </div>
                </li> -->
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">字体大小</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.font_size" @input="change('font_size', style.font_size)" class="editorforminput" :step="1" conliols-position="right" :min="10" />
                    </div>
                </li> -->
                <!-- <li class="editorformItem">
                    <div class="editorformItemName">是否加粗</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.font_weight" @change="change('font_weight', style.font_weight)" active-value="bold" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否斜体</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.font_style" @change="change('font_style', style.font_style)" active-value="italic" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('color', style.color)" show-alpha class="editorforminput" v-model="style.color" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否衬色</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.outline" @change="change('outline', style.outline)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">衬色颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('outlineColor', style.outlineColor)" show-alpha class="editorforminput" v-model="style.outlineColor" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否背景</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.background" @change="change('background', style.background)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.background">
                    <div class="editorformItemName">背景颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('backgroundColor', style.backgroundColor)" show-alpha class="editorforminput" v-model="style.backgroundColor" />
                    </div>
                </li> -->
                <li class="editorformItem" v-for="(item, index) in pageItem" :key="index">
                    <div class="editorformItemName">{{ item.name }}</div>
                    <div class="editorformItemFunc">
                        <formItem :graphic="props.graphic" :data="item" />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { fontFamily } from "@/config/config";
import formItem from "./components/form.vue";
/**
 * 组件传值
 */
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
/**
 * props默认值
 */
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
// const style: any = reactive(props.graphic.options.style);
// console.log(style, 1);
/**
 * 页面参数
 */
const pageItem = reactive([
    {
        name: "文字内容",
        prop: "text",
        type: "input",
    },
    {
        name: "字体",
        prop: "font_family",
        type: "select",
        selectOption: fontFamily,
    },
    {
        name: "字体大小",
        prop: "font_size",
        type: "number",
        numberStep: 1,
        numberMin: 10,
    },
    {
        name: "是否加粗",
        prop: "font_weight",
        type: "switch",
        activeValue: "bold",
        inactiveValue: "normal",
    },
    {
        name: "是否斜体",
        prop: "font_style",
        type: "switch",
        activeValue: "italic",
        inactiveValue: "normal",
    },
    {
        name: "颜色",
        prop: "color",
        type: "color",
    },
    {
        name: "是否衬色",
        prop: "outline",
        type: "switch",
        activeValue: true,
        inactiveValue: false,
    },
    {
        name: "衬色颜色",
        prop: "outlineColor",
        type: "color",
    },
    {
        name: "是否背景",
        prop: "background",
        type: "switch",
    },
    {
        name: "背景颜色",
        prop: "backgroundColor",
        type: "color",
    },
]);
</script>
